<!-- AppFooter.vue - 页脚组件 -->
<template>
  <!-- 页脚区域 -->
  <footer class="footer">
    <!-- 页脚背景容器 -->
    <div class="footer__bg">
      <!-- 页脚内容容器，使用网格布局 -->
      <div class="footer__container container grid">
        <!-- 品牌信息区域 -->
        <div>
          <h1 class="footer__title">小曾</h1>
          <span class="footer__subtitle" >{{ $t('home__subtitle') }}</span>
        </div>

        <!-- 页脚导航链接 -->
        <ul class="footer__links">
          <li>
            <a href="#skills" class="footer__link" >{{ $t('skills') }}</a>
          </li>
          <li>
            <a href="#portfolio" class="footer__link" >{{ $t('portfolio') }}</a>
          </li>
          <li>
            <a href="#contact" class="footer__link" >{{ $t('contact') }}</a>
          </li>
        </ul>

        <!-- 社交媒体链接 -->
        <div class="footer__socials">
          <!-- Gitee链接 -->
          <a href="https://gitee.com/zengliyi" target="_blank">
            <i class="alicon alicon-gitee footer__social"></i>
          </a>
          <!-- GitHub链接 -->
          <!-- <a href="http://github.com/changchenjia" target="_blank">
            <i class="alicon alicon-github footer__social"></i>
          </a> -->
        </div>
      </div>

      <!-- 版权信息 -->
      <p class="footer__copy">
        &#169; 小曾.Copy from
        <a class="footer__copy" href="https://www.youtube.com/c/Bedimcode"
          target="_blank">Bedimcode</a>
      </p>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
/* 页脚样式 */
.footer {
  padding-top: 2rem;

  /* 页脚容器网格布局 */
  &__container {
    row-gap: 3.5rem;
    /* 平板设备适配 */
    @include min-screen(568px) {
      grid-template-columns: repeat(2, 1fr);
    }
    /* 桌面设备适配 */
    @include min-screen(768px) {
      grid-template-columns: repeat(3, 1fr);
      padding: 0 1rem;
    }
    /* 大屏幕设备适配 */
    @include min-screen(1024px) {
      padding: 0;
    }
  }

  /* 页脚背景样式 */
  &__bg {
    background-color: var(--first-color-second);
    padding: 2rem 0 3rem;
    /* 桌面设备内边距调整 */
    @include min-screen(768px) {
      padding: 3rem 0 3.5rem;
    }
  }

  /* 页脚标题样式 */
  &__title {
    font-size: var(--h1-font-size);
    margin-bottom: var(--mb-0-25);
  }

  /* 页脚副标题样式 */
  &__subtitle {
    font-size: var(--small-font-size);
  }

  /* 页脚链接列表样式 */
  &__links {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    /* 桌面设备布局调整 */
    @include min-screen(768px) {
      flex-direction: row;
      column-gap: 2rem;
    }
  }

  /* 页脚链接悬停效果 */
  &__link:hover {
    color: var(--first-color-lighter);
  }

  /* 社交媒体图标样式 */
  &__social {
    font-size: 1.35rem;
    margin-right: var(--mb-1-5);
    /* 桌面设备对齐方式调整 */
    @include min-screen(768px) {
      justify-self: flex-end;
    }
  }

  /* 社交媒体容器样式 */
  &__socials {
    /* 桌面设备对齐方式调整 */
    @include min-screen(768px) {
      justify-self: flex-end;
    }
  }

  /* 社交媒体图标悬停效果 */
  &__social:hover {
    color: var(--first-color-lighter);
  }

  /* 版权信息样式 */
  &__copy {
    font-size: var(--smaller-font-size);
    text-align: center;
    color: var(--text-color-light);
    margin-top: var(--mb-3);
    /* 桌面设备上边距调整 */
    @include min-screen(768px) {
      margin-top: 4.5rem;
    }
  }

  /* 页脚文字颜色统一设置 */
  &__title,
  &__subtitle,
  &__link,
  &__social {
    color: #fff;
    fill: #fff;
  }
}
</style>